<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 侧边栏抽屉</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- 主页面内容 -->
<div class="container mx-auto p-4">
    <!-- 打开抽屉的按钮 -->
    <button
            id="openDrawerBtn"
            class="fixed top-4 left-4 z-30 bg-blue-500 text-white p-3 rounded-md shadow-lg hover:bg-blue-600 transition"
    >
        打开侧边栏
    </button>

    <h1 class="text-3xl font-bold mt-16 mb-4 text-center">主页面内容</h1>
    <p class="text-gray-700 mb-4">点击左上角按钮打开侧边栏抽屉。</p>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white p-6 rounded-lg shadow">内容区块 1</div>
        <div class="bg-white p-6 rounded-lg shadow">内容区块 2</div>
        <div class="bg-white p-6 rounded-lg shadow">内容区块 3</div>
    </div>
</div>

<!-- 抽屉遮罩层（带毛玻璃效果） -->
<div
        id="drawerOverlay"
        class="fixed inset-0 bg-black bg-opacity-50 backdrop-filter backdrop-blur-sm z-20 transition-opacity duration-300 opacity-0 pointer-events-none"
></div>

<!-- 侧边栏抽屉 -->
<div
        id="drawer"
        class="fixed top-0 left-0 h-full w-64 bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg shadow-xl z-30 transform -translate-x-full transition-transform duration-300 ease-in-out"
>
    <!-- 抽屉头部 -->
    <div class="p-4 border-b border-gray-200 flex justify-between items-center">
        <h2 class="text-xl font-bold">导航菜单</h2>
        <button id="closeDrawerBtn" class="text-gray-500 hover:text-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <!-- 抽屉内容 -->
    <div class="p-4">
        <nav>
            <ul class="space-y-2">
                <li>
                    <a href="#" class="block px-4 py-2 rounded-md hover:bg-gray-100 transition">首页</a>
                </li>
                <li>
                    <a href="#" class="block px-4 py-2 rounded-md hover:bg-gray-100 transition">产品</a>
                </li>
                <li>
                    <a href="#" class="block px-4 py-2 rounded-md hover:bg-gray-100 transition">关于我们</a>
                </li>
                <li>
                    <a href="#" class="block px-4 py-2 rounded-md hover:bg-gray-100 transition">联系方式</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<script>
    // 获取DOM元素
    const drawer = document.getElementById('drawer');
    const overlay = document.getElementById('drawerOverlay');
    const openBtn = document.getElementById('openDrawerBtn');
    const closeBtn = document.getElementById('closeDrawerBtn');

    // 打开抽屉函数
    function openDrawer() {
        drawer.classList.remove('-translate-x-full');
        overlay.classList.remove('opacity-0', 'pointer-events-none');
        overlay.classList.add('opacity-100', 'pointer-events-auto');
    }

    // 关闭抽屉函数
    function closeDrawer() {
        drawer.classList.add('-translate-x-full');
        overlay.classList.remove('opacity-100', 'pointer-events-auto');
        overlay.classList.add('opacity-0', 'pointer-events-none');
    }

    // 事件监听
    openBtn.addEventListener('click', openDrawer);
    closeBtn.addEventListener('click', closeDrawer);
    overlay.addEventListener('click', closeDrawer);

    // 键盘ESC键关闭抽屉
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !drawer.classList.contains('-translate-x-full')) {
            closeDrawer();
        }
    });
</script>
</body>
</html>